<template>
    <div class="movies-info">
        <NavHeader>
            <template v-slot:left>
                <span class="iconfont icon-fanhui" @click="goBack"></span>
            </template>
            <template v-slot:mid>
                <span>{{ movieInfo.nm }}</span>
            </template>
        </NavHeader>
        <OpenApp />
        <MovieShow :movieInfo="movieInfo" />
        <div class="top-fixed">
            <ShowDay :showDaysList="showDaysList" />
            <FilterNav />
        </div>
        <ShopItem :showDaysList="showDaysList" />
    </div>
</template>

<script setup name="MoviesInfo">
import { onMounted, ref } from "@vue/runtime-core";
import { useRoute, useRouter } from "vue-router";

import NavHeader from "components/common/NavHeader/index.vue";
import OpenApp from "components/common/OpenApp/index.vue";
import MovieShow from "components/common/MovieShow/index.vue";
import FilterNav from "components/common/FilterNav/index.vue";
import ShopItem from "components/common/ShopItem/index.vue";
import ShowDay from "components/ShowDay/index.vue";
import { getMoviesInfo, getShowDaysList } from "network/Home/index";
import { toFixedOne } from "utils/index";

const route = useRoute();
const router = useRouter();

const movieInfo = ref({});
const showDaysList = ref([]);

onMounted(async () => {
    const {
        data: { movie },
    } = await getMoviesInfo(route.params.id);
    movie.img = movie.img.replace("w.h", "148.208");
    movieInfo.value = movie;

    // 电影时间列表
    const {
        data: { dates },
    } = await getShowDaysList({
        movieId: route.params.id,
        channelId: 4,
        cityId: 57,
    });
    showDaysList.value = [...dates];
});

// 返回上一页
const goBack = () => {
    router.go(-1);
};
</script>

<style lang="less" scoped>
.nav-header {
    span {
        color: @text-color;
    }
}
.top-fixed {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    background-color: #fff;
}
</style>
